<html>
    <head>
        <title>菜单的收起和展开</title>
        <meta charset="UTF-8">
        <style type="text/css">
            ul{
                list-style-type: none;
            }
            #cityList{
                display: none;
            }
        
        </style>
        <script type="text/javascript">
            var hide = true;
            function disPlayOrHide(){
                var cityList = document.getElementById("cityList");
                if(hide){
                    cityList.style.display = "block";
                    hide = false;
                }else{
                    hide = true;
                    cityList.style.display = "none";
                }
            


            }

        </script>
    </head>
    <body>
        <ul>
            <li><a style="color: blueviolet; cursor:pointer" onclick="disPlayOrHide()">中国</a>
                <ul id="cityList">
                    <li>上海</li>
                    <li>北京</li>
                    <li>重庆</li>
                    <li>兰州</li>
                </ul>
            </li>
            <li>日本</li>
            <li>美国</li>
        </ul>
    </body>
</html>